import React from 'react'
import { connect } from 'dva'
import { hashHistory } from 'dva/router'
import { Form, Button, Icon, Dropdown, Menu, Modal } from 'antd'
import FlagBtn from 'widget/FlagBtn/FlagView'
import ListPage from 'widget/PageTmpl/ListPage'
import { mapStateToProps } from 'utils/view_utils'
import config from '../../../../config/config'
/*
 * 权限管理-角色新增/角色编辑
 * @author 曾文
 * @time 未知
 * */
const routeView = ({ dispatch, model, form }) => {

    const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form;
    const { modelObj, namespace } = model;

    // 表格模板中的表格列配置
    const columns = [
        { en_name: 'name', zh_name: '角色名称' },
        { en_name: 'remark', zh_name: '角色说明', width: 440 },
        { en_name: 'status', zh_name: '状态', render: data => data == 0 ? '启用' : '禁用' },
    ];
    //
    const arrNoDelete = ["1059114165218480128","1059114608807407616","1082829003590098944",'1107557732462678016']
    // 批量操作下拉菜单
    const menu = (
        <Menu onClick={(e) => { batch(e.key) }}>
            <Menu.Item key="delete">批量删除</Menu.Item>
            <Menu.Item key="forbid">批量禁用</Menu.Item>
            <Menu.Item key="open">批量启用</Menu.Item>
        </Menu>
    );

    // 再次确认提示框
    function againConfirmation(actionType, actionId, message, modalTheme = 'confirm') {
        // 设置传入的参数
        const params = { id: actionId ? actionId : modelObj.biz.selectedRows.map(item => item.permissionRoleId).join(',') };

        // 当为批量操作状态时，需要额外传入参数 -- 1：批量启用；2：批量禁用
        if (['forbid', 'open'].includes(actionType)) {
            params.status = actionType === 'forbid' ? 1 : 0;
        }

        // 根据当前弹出框的操作类型，设置调用的方法
        const funName = ['singleDelete', 'delete'].includes(actionType) ? 'batchDelete' : 'batchUpdate';

        // 设置提示信息，删除时的提示信息由接口返回
        const tips = message ? message : actionType === 'forbid' ? `确定要禁用选中的角色吗？` : `确定要启用选中的角色吗？`;

        Modal[modalTheme]({
            title: '友情提示',
            content: tips,
            maskClosable: true,
            okText: '确定', cancelText: '取消',
            onOk: () => {
                dispatch({ type: `${namespace}/${funName}`, payload: { params, cb: () => modelObj.biz.refreshListDatas(true) } });
            }
        })
    }

    // 角色删除校验
    function selfDelete(type, item) {
        dispatch({
            type: `${namespace}/checkDelete`,
            payload: {
                params: { id: item.permissionRoleId },
                callback: (actionId, message) => againConfirmation(type, actionId, message)
            }
        })
    }

    // 批量操作 - 删除、启用、禁用
    function batch(type) {
        if (type === 'delete') { // 批量删除时，需要由接口返回提示信息
            dispatch({
                type: `${namespace}/checkDelete`,
                payload: {
                    params: { id: modelObj.biz.selectedRows.map(item => item.permissionRoleId).join(',') },
                    callback: (actionId, message) => againConfirmation(type, actionId, message)
                }
            });
        } else {
            againConfirmation(type);
        }
    }

    // 单个角色状态切换
    function changeStatus(item) {
        let status = 0;
        if (item.status == 0) { status = 1 }
        dispatch({
            type: `${namespace}/changeStatus`,
            payload: {
                params: { id: item.permissionRoleId, status: status },
                cb: () => { fresh() }
            }
        })
    }

    // 表单刷新
    function fresh() {
        modelObj.biz.refreshListDatas(true)
    }

    // 表格模板配置
    let pageProps = {
        // ---------- 界面部分 ----------
        ui: {
            // 页面接口地址
            api_url: 'admin/permissionRole/listQuery',
            // api_url: "admin/estate/list",
            method: "POST",
            params: "",
            mockData: null,
            refreshByEnter: true,
            //查询栏
            search_bar: {
                fields: [
                    {
                        en_name: "name",
                        zh_name: "角色名称",
                        elem_type: "Input",
                        elem_valid_type: "string"
                    },
                    {
                        en_name: "status",
                        zh_name: "状态",
                        elem_type: "Select",
                        width:40,
                        elem_valid_type: "string",
                        cmpt_items: [
                            { "label": "启用", "value": "0" },
                            { "label": "禁用", "value": "1" }
                        ],
                    },
                ]
            },
            //右上角操作栏
            "action_bar": [
                {
                    func_name: "onBatDel",
                    label: "批量删除",
                    rowSelection: (selectedRowKeys, selectedRows) => { },
                    render: () => {
                        let isDisabled = true;
                        if (modelObj.biz && modelObj.biz.selectedRows && modelObj.biz.selectedRows.length != 0) {
                            isDisabled = false;
                        }
                        return (
                            <Dropdown overlay={menu} disabled={isDisabled}>
                                <Button style={{marginRight:'15px'}}>
                                    批量操作 <Icon type="down" />
                                </Button>
                            </Dropdown>
                        )
                    }
                },
                {
                    func_name: "onAdd",
                    label: "新增",
                    type: "primary",
                    btnId:'100201',
                    icon: "plus",
                    onClick: (e) => {
                        
                        hashHistory.push({
                            pathname: MODULE_TO_ROUTES[namespace].urlArray[0],
                            query: { actionType: 'add' }
                        })
                    }
                }
            ],
            // 数据表格
            table: {
                fields: columns,
                action_props: {
                    width: 170,
                },
                actions: [
                    {
                        func_name: "onEdit",
                        label: "",
                        render: (item) => {
                            return <FlagBtn
                                    node={  <a href='javascript:;' onClick={e => hashHistory.push({
                                        pathname: MODULE_TO_ROUTES[namespace].urlArray[0],
                                        query: { actionType: 'edit', id: item.permissionRoleId }
                                    })}>编辑</a>}
                                    btnId={'100202'}>
                                </FlagBtn>

                        }
                    },
                    {
                        func_name: "onToggleStatus",
                        render: (item) => {
                            if(item.status == 0){
                                return <FlagBtn
                                    node={<a href='javascript:;' onClick={e => { changeStatus(item) }}>禁用</a>}
                                    btnId={'100203'}>
                                </FlagBtn>

                            }else {
                                return <a href='javascript:;' onClick={e => { changeStatus(item) }}>启用</a>
                            }
                            // return <a href='javascript:;' onClick={e => { changeStatus(item) }}>{item.status == 0 ? '禁用' : '启用'}</a>
                        }
                    },
                    {
                        func_name: "onSelfDelete",
                        render: (item) => {
                             return(<FlagBtn
                                    node={arrNoDelete.indexOf(item.permissionRoleId)==-1?<a href='javascript:;' onClick={e => { selfDelete('singleDelete', item) }}>删除</a>:null}
                                    btnId={'100204'}>
                                </FlagBtn>)

                        }
                    },{
                        func_name: "onEdit",
                        render: (item) => {
                             return(<FlagBtn
                                node={  <a href='javascript:;' onClick={e => hashHistory.push({
                                    pathname: MODULE_TO_ROUTES[namespace].urlArray[0],
                                    query: { actionType: 'check', id: item.permissionRoleId }
                                })}>查看</a>}
                                btnId={'100205'}>
                            </FlagBtn>)

                        }
                    },
                ],
            }
        }
    };

    if (!!modelObj.biz) {
        pageProps.biz = modelObj.biz
        pageProps.biz.syncBackCbf = (biz) => {
            dispatch({
                type: `${namespace}/setFormVal`,
                payload: biz
            })
        }
    }

    return <ListPage pageProps={pageProps} />
};

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))
